<template>
  <div class="container">
    <!-- 头部导航 -->
    <div class="header">
      <div class="header-nav">
        <div class="box">
          <div class="left-nav">
            <p style="font-weight: bold">酷 壳 – CoolShell</p>
          </div>
          <div class="right-nav">
            <ul>
              <li class="active"><a href="">首页</a></li>
              <li><a href="">推荐文章</a></li>
              <li><a href="">本站插件</a></li>
              <li><a href="">留言小本</a></li>
              <li><a href="">关于酷壳</a></li>
              <li><a href="">关于陈皓</a></li>
              <li><a href="">RSS</a></li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 移动端下 -->
      <div class="hidden-md">
        <div class="header-second">
          <p>酷 壳 – CoolShell</p>
          <p class="hidden-list" @click="showList">图片</p>
        </div>
        <div class="hidden-list-tip" v-if="show">
          <p>首页</p>
          <p>推荐文章</p>
          <p>本站插件</p>
          <p>留言小本</p>
          <p>关于酷壳</p>
          <p>关于陈皓</p>
          <p>RSS</p>
        </div>
      </div>
      <div class="header-title">
        <div class="right-title">
          <p class="right">High一下!</p>
        </div>
        <div class="middle-title">
          <span class="up">酷 壳 – CoolShell</span>
          <p></p>
          <span class="down"
            >享受编程和技术所带来的快乐 – Coding Your Ambition</span
          >
        </div>
      </div>
    </div>
    <!-- 屏幕缩小到移动端 -->
    <div class="search-sm">
      <input type="text" placeholder="search..." />
    </div>
    <!-- 内容区start -->
    <div class="main-content">
      <div class="left-all">
        <div class="left-start">
          <div class="left-content">
            <div class="header-tip">
              <h3>源代码特洛伊木马攻击</h3>
              <div class="news">
                <p class="main-new">
                  <em></em>
                  <span>2021</span>年<span>11</span>月<span>19</span>日
                </p>
                <p>
                  <em></em>
                  <span>陈皓</span>
                </p>
                <p>
                  <em></em>
                  <span>12</span> 条评论
                </p>
                <p>
                  <em></em>
                  <span>9,659</span> 人阅读
                </p>
              </div>
            </div>
            <div class="img-information">
              <p>
                <img
                  src="../assets/1.jpg"
                  alt=""
                  align="right"
                  hspace="5"
                  vspace="5"
                />
                最近，我们在 Github 的 Code Review 中看到 Github
                开始出现下面这个 Warning 信息—— “This file contains
                bidirectional Unicode text that may be interpreted or compiled
                differently than what appears below.”也就是说我们的代码中有一些
                bidirectional unicode 的文本，中文直译作
                “双向文本”，意思是一些语言是从左到右的，而另一些则是是从右到左的（如：阿拉伯语），如果同一个文件里，即有从左向右的文本也有从右向左文本两种的混搭，那么，就叫bi-direction。术语通常缩写为“
                BiDi ”或“ bidi ”。
                使用双向文本对于中国人来说并不陌生，因为中文又可以从左到右，也可以从右到左，还可以从上到下。
              </p>
              <div class="all-img">
                <!-- <img src="../assets/2.jpg" alt="" /> -->
                <div class="bg-img"></div>
              </div>
              <div class="footer-information">
                <p>
                  早期的计算机仅设计为基于拉丁字母的从左到右的方式。
                  添加新的字符集和字符编码使许多其他从左到右的脚本能够得到支持，
                  但不容易支持从右到左的脚本，例如阿拉伯语或希伯来语，并且将两者
                  混合使用更是不可能。从右到左的脚本是通过ISO/IEC 8859-6和
                  ISO/IEC 8859-8等编码引入的，通常以书写和阅读顺序存储字母。
                  可以简单地将从左到右的显示顺序翻转为从右到左的显示顺序，
                  但这样做会牺牲正确显示从左到右脚本的能力。通过双向文本支持，可
                  以在同一页面上混合来自不同脚本的字符， 而不管书写方向如何。
                </p>
                <p class="all-content">...</p>
                <p class="read">阅读全文</p>
                <p class="footer-minute">(17人打了分，平均：4.88分)</p>
              </div>
            </div>
          </div>
        </div>
        <!-- 第二个start -->
        <div class="left-start">
          <div class="left-content">
            <div class="header-tip">
              <h3>如何做一个有质量的技术分享</h3>
              <div class="news">
                <p class="main-new">
                  <em></em>
                  <span>2021</span>年<span>11</span>月<span>19</span>日
                </p>
                <p>
                  <em></em>
                  <span>陈皓</span>
                </p>
                <p>
                  <em></em>
                  <span>12</span> 条评论
                </p>
                <p>
                  <em></em>
                  <span>9,659</span> 人阅读
                </p>
              </div>
            </div>
            <div class="img-information">
              <p>
                <img
                  src="../assets/3.jpg"
                  alt=""
                  align="right"
                  width="340"
                  hspace="5"
                  vspace="5"
                />
                分享信息并不难，大多数人都能做到，就算是不善言谈性格内向的技术人员，通过博客或社交媒体，或是不正式的交流，他们都能或多或少的做到。但是如果你想要做一个有质量有高度的分享，这个就难了，所谓的有质量和有高度，我心里面的定义有两点：1）分享内容的保鲜期是很长的，2）会被大范围的传递。我们团队内每周都在做技术分享，虽然分享的主题都很有价值，但是分享的质量参差不齐，所以，想写下这篇文章
                。供大家参考。
                首先，我们先扪心自问一下，我们自己觉得读到的好的技术文章是什么？我不知道大家的是什么，我个人认为的好的文章是下面这样的：
                把复杂的问题讲解的很简单也很清楚。比如我高中时期读到这本1978年出版的《从一到无穷大》，用各种简单通俗通懂的话把各种复杂的科学知识讲的清清楚楚。还有看过的几本很好的书，有一本是《Windows程序设计》，从一个hello
                world的程序开始一步一步教你Windows下的原生态编程。
                有各种各样的推导和方案的比较，让你知其然知其所以然。有了不同方案的比较，才可能让人有全面的认识。这个方面的经典作著是《Effective
                C++》。
                原理、为什么、思路、方法论会让人一通百通。这里面最经典的恐怕就是《十万个为什么》了，在计算机方面也有几本经典书，有《Unix编程艺术》、《设计模式》、《深入理解计算机系统》等书，以及《The
                C10K Problem》等很多技术论文。
                其实，从教科书，到专业书，再到论文，都有上面这些不错的特质。 …
              </p>
              <!-- <div class="all-img">
                <img src="../assets/2.jpg" alt="" />
              </div> -->
              <div class="footer-information">
                <p>
                  早期的计算机仅设计为基于拉丁字母的从左到右的方式。
                  添加新的字符集和字符编码使许多其他从左到右的脚本能够得到支持，
                  但不容易支持从右到左的脚本，例如阿拉伯语或希伯来语，并且将两者
                  混合使用更是不可能。从右到左的脚本是通过ISO/IEC 8859-6和
                  ISO/IEC 8859-8等编码引入的，通常以书写和阅读顺序存储字母。
                  可以简单地将从左到右的显示顺序翻转为从右到左的显示顺序，
                  但这样做会牺牲正确显示从左到右脚本的能力。通过双向文本支持，可
                  以在同一页面上混合来自不同脚本的字符， 而不管书写方向如何。
                </p>
                <p class="all-content">...</p>
                <p class="read">阅读全文</p>
                <p class="footer-minute">(17人打了分，平均：4.88分)</p>
              </div>
            </div>
          </div>
        </div>
      </div>
       <!-- 第二个end -->
      <!-- 右边搜索区start -->
      <div class="right-start">
        <div class="search">
          <input type="text" placeholder="search..." />
        </div>
        <div class="nav-information">
          <div class="title-tip">本站公告</div>
          <div class="btn">Twitter@haoel</div>
          <div class="er-img">
            <p>微信小程序</p>
            <img src="../assets/7.png" alt="" />
          </div>
          <div class="er-img">
            <p>微信公众号</p>
            <img src="../assets/6.png" alt="" />
          </div>
          <div class="er-img">
            <p>极客时间专栏</p>
            <img src="../assets/5.png" alt="" />
          </div>
        </div>
        <div class="list">
          <div class="title-tip">最新文章</div>
          <div class="list-information">
            <p>源代码特洛伊木马攻击</p>
            <p>Go编程模式 ： 泛型编程</p>
            <p>如何做一个有质量的技术分享</p>
            <p>Go 编程模式：k8s Visitor 模式</p>
            <p>Go编程模式：Pipeline</p>
            <p>Go编程模式：委托和反转控制</p>
            <p>Go 编程模式：Go Generation</p>
            <p>Go编程模式：Map-Reduce</p>
          </div>
        </div>
      </div>
      <!-- 右边搜索区end-->
    </div>
    <!-- 底部导航区 -->
    <div class="footer-nav">
      <div class="footer-concat">
        <p>
          CoolShell.cn © 2021 | Powered by WordPress | Based on Theme: Nisarg by
          Falguni Desai.
        </p>
        <p>京ICP备18054967号-1</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return{
      show:false
    }
  },
  methods:{
    showList(){
     this.show = !this.show
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  /* margin: 0 10px; */
}
a {
  color: #42b983;
  text-decoration: none;
}
.container {
  width: 100%;
  background-color: #eceff1;
}
.container .header-nav {
  width: 100%;
  background-color: rgb(252, 248, 248);
  position: fixed;
  z-index: 9;
  top: 0;
  /* left: 5%; */
}
.header-second {
  display: none;
}
.box {
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.left-nav p {
  font-size: 1.2rem;
}
.right-nav ul li a {
  font-size: 1rem;
  color: black;
}
.right-nav ul li {
  text-align: center;
  width: 80px;
}
li.active::before {
  content: "";
  display: block;
  border-top: 4px solid #42b983;
  color: #42b983;
  position: relative;
  top: -20px;
}
.header-title {
  width: 100%;
  background-color: rgb(29, 43, 45);
  color: white;
  padding-top: 60px;
  margin-bottom: 40px;
}
.middle-title {
  margin: 0 auto;
  width: 70%;
  display: flex;
  flex-flow: column;
}
.right-title {
  display: flex;
  justify-content: right;
}
.right {
  margin-top: 0;
  color: rgb(48, 48, 157);
}
.middle-title span {
  text-align: center;
}
.middle-title p {
  border-bottom: 2px solid rgb(240, 238, 238);
  width: 25rem;
  margin: 10px auto;
}
.middle-title span:nth-child(1) {
  font-size: 3.2rem;
}
.down {
  margin-bottom: 50px;
}
/* 内容区样式 */
.main-content {
  width: 80%;
  margin: 0 auto;
  /* height: 800px; */
  /* background-color: rgb(65, 64, 64); */
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}
.left-all {
  width: 75%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.left-start {
  margin-bottom: 40px;
}
.left-content {
  background-color: #ffffff;
  padding-bottom: 30px;
}
.right-start {
  width: 20%;
}
.header-tip {
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  border-bottom: 2px solid rgb(0, 150, 136);
}
.header-tip h3 {
  text-align: center;
  font-size: 2rem;
}
.news {
  display: flex;
  justify-content: center;
  margin-top: -38px;
}
.news p {
  padding-left: 20px;
}
.news p:nth-child(1) {
  padding-left: 0;
}
.img-information {
  width: 80%;
  margin: 0 auto;
}
.img-information p {
  font-size: 16px;
  line-height:2rem;
}
.img-information p img {
  width: 40%;
}
.all-img {
  width: 80%;
  margin: 0 auto;
}
.all-img img {
  width: 100%;
  height: 200px;
}
.read {
  text-align: center;
}
.footer-minute,
.all-content {
  text-align: left;
}
.footer-minute {
  font-weight: bolder;
}
/* 右边搜索区 */
.right-start {
}
.search,
.nav-information,
.list {
  background-color: #fff;
}
/* 右边列表 */
.list .list-information {
  width: 80%;
  margin: 0 auto;
}
.list {
  margin-top: 40px;
  padding-bottom: 20px;
}
.list-information p {
  border-bottom: 1px solid rgb(102, 101, 101);
  padding-bottom: 10px;
  color: rgb(102, 101, 101);
}
.list-information p:last-of-type {
  border-bottom: 0;
}
.list-information p:hover {
  color: #00a3b8;
}
.search {
  padding: 20px;
  text-align: center;
}
.nav-information {
  padding-bottom: 40px;
  margin-top: 30px;
}
.search input {
  width: 90%;
  outline: none;
  padding: 5px 0;
  text-indent: 10px;
}
.nav-information .er-img {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.er-img img {
  width: 75%;
}
.btn {
  width: 60%;
  background-color: #1b95e0;
  padding: 5px 2px;
  margin: 0 auto;
  border-radius: 6px;
  text-align: center;
  color: white;
  font-size: 1rem;
}
.title-tip {
  padding: 25px 20px;
  position: relative;
  z-index: 1;
}
.title-tip::after {
  content: "";
  display: block;
  width: 40px;
  border: 2px solid #1b95e0;
  position: absolute;
  bottom: 10px;
  z-index: 1;
}
/* 底部样式 */
.footer-nav {
  width: 100%;
  background-color: #222222;
  padding: 20px 0;
}
.footer-concat {
  width: 80%;
  margin: 0 auto;
  text-align: center;
  color: white;
}
.search-sm{
  width:90%;
  margin:0 auto;
  text-align: center;
  padding-bottom:40px;
  display:none;
}
.search-sm input{
  padding:14px 0;
  width:100%;
  text-indent: 14px;
  outline:none;
}
  /* .hidden-md{
    transform: scale3d(1,1,1);
  } */
.hidden-list-tip{
  background-color:#FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: left;
  padding:10px 0;
  position: fixed;
  /* top: 0px;right:0;这句很重要 */
  width:100%;
  top:50px;
  right:0;
  border-bottom:1px solid rgb(135, 133, 133);
  display: none;
}
.hidden-list-tip p{
  padding-left:20px;
}
/* 响应式+移动端 */
@media (max-width: 960px) {
  .container .header-nav {
    display: none;
  }
  .header-second {
    width: 100%;
    background-color: rgb(252, 248, 248);
    position: fixed;
    z-index: 9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    top: 0;
    border-bottom:1px solid rgb(135, 133, 133);
    /* display:none; */
  }
  .middle-title p {
    width: 2rem;
  }
  .right-start {
    display: none;
  }
  .main-content {
    width: 100%;
  }
  .left-all {
    width: 100%;
    margin: 0 auto;
  }
  .img-information p img {
    width: 100%;
  }
  .header-tip,.img-information{
    width:90%;
  }
  .news{
    margin-top:-20px;
  }
  .news p{
    font-size:0.4rem;
  }
  .header-tip h3{
    font-size: 1.5rem;
  }
  /* .left-content{
    display: none;
  } */
  .search-sm{
    display: block;
  }
  .hidden-list-tip{
    display: block;
  }
}
.bg-img{
  width: 100%;
  height: 50px;
  background: url('../assets/2.jpg') no-repeat;
  background-size:100% 100% ;

}
</style>


<style>
  .a{
    color: red;
  }
  @media (max-width: 960px) {
    .a{
      color: burlywood;
    }
  }
  @media (max-width: 760px) {
     .a{
       color: blue;
     }
  }
</style>